<template>
    <div class="chart-wrapper">
        <Select v-model="thisYear" style="width:200px">
            <Option v-for="item in yearList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <button @click="addChart">添加</button>
        <button @click="chartClear">清除</button>
        <div :id="this.cid" v-if="this.cid" class="chart"></div>
    </div>
</template>

<script>
import axios from "axios"
var echarts = require('echarts')
export default {
    data () {
        return {
            yearList: [
                {
                    value: '2017',
                    label: '2017'
                },
                {
                    value: '2016',
                    label: '2016'
                },
                {
                    value: '2015',
                    label: '2015'
                },
                {
                    value: '2014',
                    label: '2014'
                },
                {
                    value: '2013',
                    label: '2013'
                },
                {
                    value: '2012',
                    label: '2012'
                },
                {
                    value: '2011',
                    label: '2011'
                },
                {
                    value: '2010',
                    label: '2010'
                },
                {
                    value: '2009',
                    label: '2009'
                },
                {
                    value: '2008',
                    label: '2008'
                },
                {
                    value: '2007',
                    label: '2007'
                },
                {
                    value: '2006',
                    label: '2006'
                },
                {
                    value: '2005',
                    label: '2005'
                },
                {
                    value: '2004',
                    label: '2004'
                },
                {
                    value: '2003',
                    label: '2003'
                },
                {
                    value: '2002',
                    label: '2002'
                },
                {
                    value: '2001',
                    label: '2001'
                },
                {
                    value: '2000',
                    label: '2000'
                },
                {
                    value: '1999',
                    label: '1999'
                },
                {
                    value: '1998',
                    label: '1998'
                },
                {
                    value: '1997',
                    label: '1997'
                },
                {
                    value: '1996',
                    label: '1996'
                },
                {
                    value: '1995',
                    label: '1995'
                },
                {
                    value: '1994',
                    label: '1994'
                },
                {
                    value: '1993',
                    label: '1993'
                }
            ],
            thisYear: '',
            isAdd: false
        }
    },
    watch: {
        thisYear: {
            handler: function (val,oldVal) {
                this.axio(val)
                this.isAdd = true
            },
            deep: true
        } 
    },
    props: {
        cid: {
            type: String,
            default: ''
        },
        options: {
            type: Object,
            default: function () {
                return {}
            }
        }
    },
    mounted() {
        this.initChart()
    },
    methods: {
        initChart () {
            var chartw = document.getElementById(this.cid)
            if(this.cid && this.options.series && chartw) {
                let myChart = echarts.init(chartw)
                myChart.setOption(this.options)
            }
        },
        addChart () {
            if(this.isAdd) {
                this.$parent.addChart(this.thisYear,this.eqdata)
                this.initChart()
                this.isAdd = false
            }
        },
        chartClear () {
            this.$parent.chartClear()
            var chartw = document.getElementById(this.cid)
            let myChart = echarts.init(chartw)
            myChart.setOption(this.options,true)
        },
        axio: function (year) {
          axios
          .get("http://172.17.130.170:8082/getData/"+year+"-01-01/"+year+"-12-30")
          .then(
            function(response) {
              if (response.status === 200) {
                if (response.data.reason === "Success") {
                  this.eqdata = response.data.result
                  // console.log(this.eqdata)
                }
              }
            }.bind(this)
          )
          .catch(function(err) {
            console.log(err)
          })
        }
    }
}
</script>

<style>
    .chart-wrapper{
        height: 100%;
        float: left;
    }
    .chart{
        width: 100%;
        height: 100%;
    }
</style>
